<template>
  <div id="login">
    <div
      :style="'height:' + (type ? 540 : 580) + 'px;'"
      class="login-frame"
    >
      <div
        v-show="type !== 'login'"
        class="get-login"
        @click="handleGetLogin()"
      >
        返回登录
        <img src="@/assets/login/go-to-link.png" />
      </div>
      <div
        v-show="type === 'login'"
        class="login-logo"
      >
        <img
          alt=""
          src="@/assets/login/scene.png"
        />
      </div>
      <div class="login-body">
        <div class="p1">
          <img
            alt=""
            src="@/assets/login/logo.png"
          />
        </div>
        <div class="p2">互联网医疗+智慧医药管理全链条大数据平台</div>
        <div
          v-show="type === 'login'"
          class="p3"
        >
          九医云医药管理系统-医疗机构
        </div>
        <div
          v-if="type === 'reg'"
          class="p4"
        >注册入驻</div>
        <div
          v-if="type === 'pass'"
          class="p4"
        >忘记密码</div>
        <div
          v-if="type === 'login'"
          class="submit-form"
        >
          <el-form
            ref="form"
            :model="login"
          >
            <el-form-item
              :rules="getRules('account', '账号')"
              prop="account"
            >
              <el-input
                v-model="login.account"
                clearable
                placeholder="请输入账号"
                type="text"
              >
                <img
                  slot="prefix"
                  src="@/assets/login/account.png"
                />
              </el-input>
            </el-form-item>
            <el-form-item
              :rules="getRules('account', '密码')"
              prop="password"
            >
              <el-input
                v-model="login.password"
                :type="passwordType ? 'password' : 'text'"
                auto-complete="new-password"
                clearable
                placeholder="请输入密码"
              >
                <img
                  slot="prefix"
                  src="@/assets/login/lock.png"
                />
                <div
                  v-show="login.password"
                  slot="suffix"
                  class="login-suffix"
                  @click="handleShowPassword"
                >
                  <img
                    v-if="passwordType"
                    alt=""
                    height="20"
                    src="@/assets/login/hide.png"
                    style="margin-top:10px;margin-left: 5px"
                    width="20"
                  >
                  <img
                    v-else
                    alt=""
                    height="20px"
                    src="@/assets/login/show.png"
                    style="margin-top:10px;margin-left: 5px"
                    width="20px"
                  >
                </div>
              </el-input>
            </el-form-item>
            <div v-if="phoneShow">
              <el-form-item
                :rules="getRules('phone', '手机号')"
                prop="phone"
              >
                <el-input
                  v-model="login.phone"
                  class="login-input-phone"
                  clearable
                  placeholder="请输入手机号"
                  type="text"
                >
                  <div slot="prefix">
                    <img
                      height="20"
                      src="@/assets/login/tel.png"
                      style="float: left"
                      width="20"
                    />
                    <span style="color:#202020;padding-left: 10px;line-height: 40px;display: inline-block;float: left">+86(中国)</span>
                  </div>
                </el-input>
              </el-form-item>
              <el-form-item
                :rules="getRules('number', '验证码')"
                prop="code"
              >
                <el-input
                  v-model="login.code"
                  class="login-input-code"
                  clearable
                  placeholder="请输入验证码"
                  type="text"
                >
                  <div slot="prefix">
                    <img
                      height="20"
                      src="@/assets/login/security.png"
                      style="float: left"
                      width="20"
                    />
                  </div>
                </el-input>
                <el-button
                  :disabled="codeNum === 0 ? false : true"
                  :loading="codeNum === 0 ? loading : false"
                  :type="codeNum === 0 ? 'primary' : 'info'"
                  class="login-button-code"
                  @click="handleGetCode(login.phone)"
                >
                  {{ codeNum !== 0 ? "重新获取(" + codeNum + "s)" : "获取验证码" }}
                </el-button>
              </el-form-item>
            </div>
            <el-button
              :loading="loading"
              style="width:100%;height:40px;"
              type="primary"
              @click="handleSubmit(login)"
            >登录
            </el-button>
            <el-button
              :loading="loading"
              style="width:100%;height:40px;color: #1890ff;border: 1px solid #1890ff;margin-left: 0px;margin-top: 10px;"
              @click="handleSetUrl('reg')"
            >注册账号,免费入驻
            </el-button>
            <div
              class="forget"
              @click="handleSetUrl('pass')"
            >忘记密码
            </div>
          </el-form>
        </div>
        <reg-modal
          v-show=" type=== 'reg' "
          ref="reg"
          @on-login="handleSubmit"
        ></reg-modal>
        <pass-modal
          v-show=" type=== 'pass' "
          ref="pass"
          @on-login="handleSubmit"
        ></pass-modal>
      </div>
    </div>
    <div class="copyright">
      Copyright©2020
      九为（浙江）网络科技有限公司版权所有&nbsp;&nbsp;&nbsp;备案号：
      <a
        href="https://beian.miit.gov.cn"
        target="_blank"
      >浙ICP备20015044号</a>
      &nbsp;&nbsp;&nbsp;版本号：{{ version }}
    </div>
  </div>
</template>
<script>
import { errorCount, getCode, getServerToken } from "@/api/login";
import { getVersion } from "@/api/dict";
import { setToken } from "@/utils/auth";
import getRules from "@/validUtils";
import regModal from "./register";
import passModal from "./forgetPassword";

export default {
  name: "login",
  components: {
    regModal,
    passModal,
  },
  data() {
    return {
      getRules: getRules,
      loading: false,
      passwordType: true,
      phoneShow: false,
      version: "",
      type: "login", // reg 注册 pass 忘记密码 login 登入
      typeNum: 1,
      login: {
        account: "",
        password: "",
        phone: "",
        code: "",
      },
      codeNum: 0,
      saleShow: false,
    };
  },
  created() {
    // 获取版本信息
    this.handleGetVersion();
  },
  mounted() {
    // 监听提交
    this.listenEnter();
  },
  methods: {
    // 获取版本信息
    handleGetVersion() {
      this.loading = true;
      getVersion()
        .then((res) => {
          this.loading = false;
          this.version = res[0] && res[0].dictValue;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 密码是否可见
    handleShowPassword() {
      this.passwordType = !this.passwordType;
    },
    // 登入
    handleSubmit(row, type) {
      if (!type) {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
        });
      }
      this.login.account = row.account;
      this.loading = true;
      getServerToken(row)
        .then((res) => {
          setToken(res.access_token);
          this.handleGetLogin();
          Promise.all([
            this.getFullUser(),
            this.getAllDictList(),
            // this.getMenuBtns(),
          ])
            .then((res) => {
              let { checkState, flowStatus } = res[0];
              if (flowStatus === 3) {
                if (checkState === 1) {
                  this.$router.replace("check-in-status");
                } else if (checkState === 0 || checkState === 2) {
                  //审核中和已拒绝
                  this.$router.replace({ path: "check-in-status" });
                } else if (checkState === -1) {
                  this.$router.replace({
                    path: "check-in-corporate-information",
                    query: { step: 2 },
                  });
                }
              } else {
                this.$router.replace({
                  path: "check-in-corporate-information",
                  query: { step: flowStatus },
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch((res) => {
          //登录失败判断是否三次错误
          errorCount(this.login.account).then((res) => {
            this.phoneShow = res;
          });
          this.loading = false;
        });
    },
    /**
     * 监听enter键
     */
    listenEnter() {
      document.onkeydown = (event) => {
        const e = event || window.event;
        if (e && e.keyCode === 13) {
          // 回车键的键值为13
          switch (this.type) {
            case "login":
              this.handleSubmit(this.login);
              break;
            case "reg":
              this.$refs["reg"].handleSubmit();
              break;
            case "pass":
              this.$refs["pass"].handleSubmit();
          }
        }
      };
    },
    handleGetCode(phone) {
      this.$refs["form"].validateField("phone", (valid) => {
        if (!valid) {
          getCode(phone).then((res) => {
            this.codeNum = 60;
            let time;
            time = setInterval(() => {
              if (this.codeNum) {
                this.codeNum = --this.codeNum;
              } else {
                clearInterval(time);
              }
            }, 1000);
          });
        }
      });
    },
    handleSetUrl(value) {
      this.type = value;
      this.$refs[value].init();
    },
    handleGetLogin() {
      this.type = "login";
    },
  },
};
</script>
<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  background: url("../../assets/login/login-bg.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .copyright {
    width: 100%;

    position: absolute;
    left: 0;
    bottom: 30px;
    font-size: 12px;
    text-align: center;
    color: #909399;

    a {
      color: #909399;
    }
  }

  .login-frame {
    width: 1100px;
    background: #ffffff;
    box-shadow: 0px 2px 20px 2px rgba(24, 144, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .get-login {
      position: absolute;
      top: 24px;
      right: 20px;
      color: #909399;
      font-size: 14px;
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        width: 20px;
        height: 20px;
        margin-left: 5px;
      }
    }

    .login-logo {
      width: 476px;
      height: 386px;
      margin-right: 94px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .login-body {
      width: 350px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .p1 {
        width: 100%;
        display: flex;
        justify-content: center;

        img {
          width: 187px;
          height: 40px;
        }
      }

      .p2 {
        width: 100%;
        text-align: center;
        margin-top: 15px;
        font-size: 14px;
        font-weight: 400;
        color: #909399;
      }

      .p3 {
        margin-top: 40px;
        margin-bottom: 20px;
        font-size: 16px;
        text-align: center;
        color: #1890ff;
      }

      .p4 {
        margin: 10px 0;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #1890ff;
      }

      .submit-form {
        width: 100%;

        .pass-action {
          position: absolute;
          right: 10px;
          top: 6px;
          z-index: 10;
          width: 15px;
          height: 15px;

          img {
            height: 100%;
            width: 100%;
            cursor: pointer;
          }
        }

        /deep/ .el-input--medium .el-input__inner {
          height: 40px;
          line-height: 40px;
        }

        /deep/ .el-input-group__append,
        /deep/ .el-input-group__prepend {
          background: #fff;
        }

        /deep/ .el-input-group__prepend {
          border: 0;
          border-left: 1px solid #dcdfe6;
          border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          border-right: 0;
          padding: 0 15px;
        }

        /deep/ .el-input__inner {
          padding-left: 45px;
        }

        /deep/ .el-input__prefix {
          left: 15px;

          img {
            padding-top: 10px;
          }
        }
      }
    }
  }

  .forget {
    text-align: center;
    color: #909399;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
  }

  .drugBtn {
    position: absolute;
    top: 0;
    left: 230px;
    width: 120px;
  }

  .msgTips {
    position: absolute;
    top: 0;
    left: 400px;
    width: 120px;
  }

  .el-button {
    height: 40px;
  }

  .login-suffix {
    display: inline-block;
    float: right;
    max-height: 5px;
  }

  .login-input-phone {
    /deep/ .el-input__inner {
      padding-left: 130px !important;
    }
  }

  .login-input-code {
    width: 200px;
    float: left;
  }

  .login-button-code {
    float: right;
  }
}
</style>
